<template>
    <span class="ObjectSpan">
        { <span> // {{ option.description }} ( {{ option.type }} )</span>
    </span>
    <div style="padding: 0 0 0 16px">
        <div class="ObjectItem" v-for="(item, key) in option.properties">
            <ValueButton />
            <span class="KayItem">{{ key }} :</span>
            <ViewData :option="item" :value="'asd'" />
            <span class="DeleteButton" @click="DeleteItem(key)">
                <DeleteOutlined />
            </span>
            <br />
        </div>
    </div>
    <a-button size="small" @click="AddEvent(AddOptions)">
        <template #icon>
            <PlusOutlined />
        </template>
    </a-button>
    <span> }</span>
</template>
<script setup>
import { PlusOutlined, DeleteOutlined } from "@ant-design/icons-vue";
import ValueButton from "./ValueButton.vue";
import ViewData from "./index.vue";
import { inject, reactive } from "vue";

const props = defineProps(["option"]);
const AddEvent = inject("AddEvent");

const AddOptions = (data) => {
    if (props.option.properties === undefined) {
        props.option.properties = reactive({});
    }
    props.option.properties[data.key] = {
        type: data.type,
    };
};
const DeleteItem = function (key) {
    delete props.option.properties[key];
};
</script>
<style lang="less" scoped>
.ObjectItem {
    display: flex;
}
.ObjectSpan {
    line-height: 32px;
}
.KayItem {
    line-height: 32px;
}
.DeleteButton {
    line-height: 32px;
    font-size: 14px;
}
</style>
